/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div :style="{position: 'absolute', left: Data.busleft, top: Data.bustop}" class="northbusmap">
    <div :class="Data.id >= 9 && Data.id <= 12 ? '' : 'hide'">
      <svg
        version="1.1"
        id="图层_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 24 91"
        style="enable-background:new 0 0 24 91;"
        xml:space="preserve"
        :width="IconWdith"
        :height="IconLengh"
      >
        <g id="有轨电车-北" v-if="Data.controltype === 5">
          <path
            class="st0"
            d="M0,4v83c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4z"
          ></path>
          <g>
            <path
              class="st1"
              d="M9.6,46.2L9.6,46.2c3.4,0,6.2-2.8,6.2-6.2v-3.2l0.5,0.8c0,0.1,0.1,0.1,0.3,0.1c0.1,0,0.1-0.1,0.3-0.1l1.2-3.1
c0-0.1,0-0.3-0.1-0.4c-0.1,0-0.3,0-0.4,0.1l-1,2.6l-0.6-1V14.5c0-0.4-0.3-0.6-0.6-0.6H7.6c-0.4,0-0.6,0.3-0.6,0.6v0.4v0.6v0.9v0.4
v0.9v4.9v0.9V24v0.9v4.9v0.9v0.4V32v5.3v0.9v0.4v0.9V40v4.3C6.7,45.4,8.6,46.2,9.6,46.2z M10.9,17.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5H10.9z M10.9,20.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5H10.9z M10.9,23.6c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5V23c0,0.3-0.3,0.5-0.5,0.5h-2.2V23.6z M10.9,26.5c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5V26c0,0.3-0.3,0.5-0.5,0.5H10.9z M10.9,29.6c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5H10.9z M10.9,32.9c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5H10.9z M10.9,36c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5H10.9z M10.9,39c-0.3,0-0.5-0.3-0.5-0.5v-1.6
c0-0.3,0.3-0.5,0.5-0.5h2.2c0.3,0,0.5,0.3,0.5,0.5v1.7c0,0.3-0.3,0.5-0.5,0.5h-2.2V39z M8.5,43.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6
c0-0.4,0.4-0.8,0.8-0.8h4.3c0.4,0,0.8,0.4,0.8,0.8c0,1.3-1,2.3-2.3,2.3L8.5,43.5L8.5,43.5z"
            ></path>
            <path
              class="st1"
              d="M5.8,13.1v34c0,0.3-0.3,0.5-0.5,0.5s-0.5-0.3-0.5-0.5v-34c0-0.3,0.3-0.5,0.5-0.5C5.5,12.6,5.8,12.8,5.8,13.1z"
            ></path>
          </g>
        </g>
        <g id="公交车-北" v-if="Data.controltype === 3">
          <path
            class="st0"
            d="M0,4v83c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4z"
          ></path>
          <g>
            <path
              class="st1"
              d="M7.1,38.3c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8S8.9,41,8.9,40C8.9,39.2,8.1,38.3,7.1,38.3z M7.1,38.8
c0.6,0,1.3,0.5,1.3,1.3s-0.5,1.3-1.3,1.3c-0.6,0-1.3-0.5-1.3-1.3C5.9,39.3,6.5,38.8,7.1,38.8z"
            ></path>
            <path
              class="st1"
              d="M7.1,21c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8S8.1,21,7.1,21z M7.1,21.5
c0.6,0,1.3,0.5,1.3,1.3c0,0.6-0.5,1.3-1.3,1.3c-0.6,0-1.3-0.5-1.3-1.3S6.5,21.5,7.1,21.5z"
            ></path>
            <path
              class="st1"
              d="M13.3,13.7H8.6c-0.3,1.1-0.9,3.8-1.3,5.2v1.5c1.3,0,2.3,1.1,2.3,2.4s-1,2.3-2.3,2.4v12.5
c1.3,0,2.3,1.1,2.3,2.4s-1,2.3-2.3,2.4v3.4v0.9V47c0,0.4,0.3,0.6,0.6,0.6h3.4l0.4-0.8h3c1,0,1.8-0.8,1.8-1.8V17.4
C16.6,15.2,15.1,13.7,13.3,13.7z M14.6,43c0.4,0,0.6,0.3,0.6,0.6v1c0,0.4-0.3,0.6-0.6,0.6H8.9c-0.4,0-0.6-0.3-0.6-0.6v-0.9
c0-0.4,0.3-0.6,0.6-0.6L14.6,43L14.6,43z M14.8,36c0.3,0,0.5,0.3,0.5,0.5v4.9c0,0.3-0.3,0.5-0.5,0.5h-2.1c-0.3,0-0.5-0.3-0.5-0.5
v-4.9c0-0.3,0.3-0.5,0.5-0.5H14.8z M14.8,29.3c0.3,0,0.5,0.3,0.5,0.5v4.9c0,0.3-0.3,0.5-0.5,0.5h-2.1c-0.3,0-0.5-0.3-0.5-0.5v-4.9
c0-0.3,0.3-0.5,0.5-0.5C12.7,29.3,14.8,29.3,14.8,29.3z M14.8,22.5c0.3,0,0.5,0.3,0.5,0.5v5c0,0.3-0.3,0.5-0.5,0.5h-2.1
c-0.3,0-0.5-0.3-0.5-0.5v-5c0-0.3,0.3-0.5,0.5-0.5H14.8z M14.8,15.8c0.3,0,0.5,0.3,0.5,0.5v4.9c0,0.3-0.3,0.5-0.5,0.5h-2.1
c-0.3,0-0.5-0.3-0.5-0.5v-4.9c0-0.3,0.3-0.5,0.5-0.5C12.7,15.8,14.8,15.8,14.8,15.8z"
            ></path>
          </g>
        </g>
        <g id="BRT-北" v-if="Data.controltype === 4">
          <path
            class="st0"
            d="M0,4v83c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4z"
          ></path>
          <g>
            <path
              class="st1"
              d="M2.2,9.7v-7h2.6c0.5,0,1,0,1.3,0.2s0.7,0.3,0.8,0.7c0.2,0.3,0.3,0.7,0.3,1s0,0.7-0.2,0.8S6.5,5.9,6.2,6.1
c0.5,0.2,0.8,0.3,1,0.7c0.2,0.3,0.3,0.7,0.3,1.1c0,0.3,0,0.7-0.2,1S7,9.4,6.8,9.6C6.6,9.8,6.1,9.8,6,9.8C5.7,9.8,5.3,10,4.9,10
H2.2V9.7z M3.1,8.9H5c0.3,0,0.5,0,0.7,0S6,8.7,6.2,8.7s0.2-0.3,0.3-0.5C6.7,8,6.7,7.9,6.7,7.5c0-0.3,0-0.5-0.2-0.7S6.2,6.5,6,6.3
c-0.2,0-0.7-0.2-1-0.2H3.3L3.1,8.9L3.1,8.9z M3.1,5.6h1.5c0.5,0,0.7,0,0.8,0s0.5-0.2,0.5-0.3C6.1,5.1,6.1,5,6.1,4.6
c0-0.2,0-0.5-0.2-0.7C5.8,3.8,5.6,3.6,5.4,3.6c0-0.2-0.3-0.2-0.8-0.2H3.1V5.6z"
            ></path>
            <path
              class="st1"
              d="M8.9,9.7v-7H12c0.7,0,1.1,0,1.5,0.2s0.7,0.3,0.8,0.7c0.2,0.3,0.3,0.7,0.3,1c0,0.5-0.2,1-0.5,1.3
s-0.8,0.5-1.5,0.7c0.4,0,0.5,0,0.5,0.1c0.3,0.3,0.5,0.5,0.8,1l1.1,2h-1l-1-1.5c-0.3-0.5-0.5-0.8-0.7-1S12,6.9,11.8,6.7
s-0.3-0.1-0.5-0.1s-0.3,0-0.5,0H9.7v3.1H8.9z M9.7,5.7h2c0.5,0,0.8,0,1-0.2s0.5-0.2,0.5-0.5c0.2-0.2,0.2-0.3,0.2-0.7
c0-0.3-0.2-0.7-0.3-0.8S12.4,3.2,12,3.2H9.7L9.7,5.7L9.7,5.7z"
            ></path>
            <path class="st1" d="M17.6,9.7V3.5h-2.3V2.6h5.6v0.9h-2.3v6.2H17.6z"></path>
          </g>
          <g>
            <path
              class="st1"
              d="M7.1,38.3c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8S8.9,41,8.9,40C8.9,39.2,8.1,38.3,7.1,38.3z M7.1,38.8
c0.6,0,1.3,0.5,1.3,1.3s-0.5,1.3-1.3,1.3c-0.6,0-1.3-0.5-1.3-1.3C5.9,39.3,6.5,38.8,7.1,38.8z"
            ></path>
            <path
              class="st1"
              d="M7.1,21c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8S8.1,21,7.1,21z M7.1,21.5
c0.6,0,1.3,0.5,1.3,1.3c0,0.6-0.5,1.3-1.3,1.3c-0.6,0-1.3-0.5-1.3-1.3S6.5,21.5,7.1,21.5z"
            ></path>
            <path
              class="st1"
              d="M13.3,13.7H8.6c-0.3,1.1-0.9,3.8-1.3,5.2v1.5c1.3,0,2.3,1.1,2.3,2.4s-1,2.3-2.3,2.4v12.5
c1.3,0,2.3,1.1,2.3,2.4s-1,2.3-2.3,2.4v3.4v0.9V47c0,0.4,0.3,0.6,0.6,0.6h3.4l0.4-0.8h3c1,0,1.8-0.8,1.8-1.8V17.4
C16.6,15.2,15.1,13.7,13.3,13.7z M14.6,43c0.4,0,0.6,0.3,0.6,0.6v1c0,0.4-0.3,0.6-0.6,0.6H8.9c-0.4,0-0.6-0.3-0.6-0.6v-0.9
c0-0.4,0.3-0.6,0.6-0.6L14.6,43L14.6,43z M14.8,36c0.3,0,0.5,0.3,0.5,0.5v4.9c0,0.3-0.3,0.5-0.5,0.5h-2.1c-0.3,0-0.5-0.3-0.5-0.5
v-4.9c0-0.3,0.3-0.5,0.5-0.5H14.8z M14.8,29.3c0.3,0,0.5,0.3,0.5,0.5v4.9c0,0.3-0.3,0.5-0.5,0.5h-2.1c-0.3,0-0.5-0.3-0.5-0.5v-4.9
c0-0.3,0.3-0.5,0.5-0.5C12.7,29.3,14.8,29.3,14.8,29.3z M14.8,22.5c0.3,0,0.5,0.3,0.5,0.5v5c0,0.3-0.3,0.5-0.5,0.5h-2.1
c-0.3,0-0.5-0.3-0.5-0.5v-5c0-0.3,0.3-0.5,0.5-0.5H14.8z M14.8,15.8c0.3,0,0.5,0.3,0.5,0.5v4.9c0,0.3-0.3,0.5-0.5,0.5h-2.1
c-0.3,0-0.5-0.3-0.5-0.5v-4.9c0-0.3,0.3-0.5,0.5-0.5C12.7,15.8,14.8,15.8,14.8,15.8z"
            ></path>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: 'northBusSvg',
  props: {
    IconLengh: {
      // 相位图标长度
      type: String,
      default: '91px'
    },
    IconWdith: {
      // 相位图标宽度
      type: String,
      default: '24px'
    },
    Data: {
      type: Object
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.invisible {
  visibility: hidden;
}
.hide {
  display: none;
}
.st0{opacity:0.8;fill:#5F5F5F;enable-background:new;}
.st1{fill:#FFFFFF;}
</style>
